﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>无止境IM</title>

    <link href="../Theme/css/base.css" rel="stylesheet" />
    <link href="../Theme/css/chat.css" rel="stylesheet" />
    <link href="../Theme/css/other.css" rel="stylesheet" />
    <link href="~/Theme/css/system.css" rel="stylesheet" />


    <script src="../Scripts/pinyin.js" type="text/javascript"></script>
    <script src="../Scripts/database.js" type="text/javascript"></script>
    <script src="../Scripts/indexed.db.js" type="text/javascript"></script>
    <script src="../Scripts/helper.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery/jquery.js" type="text/javascript"></script>
    <script src="../Scripts/lib/lodash.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/xss.js" type="text/javascript"></script>
    <!--用于获取文件MD5 js api(发送图片时用到)-->
    <script src="../Scripts/lib/md5/spark-md5.js" type="text/javascript"></script>
    <!--web im sdk-->
    <script src="../sdk/webim.js" type="text/javascript"></script>
    <script src="../sdk/json2.js" type="text/javascript"></script>
    <!--web im 解析一条消息 示例代码-->
    <script src="../Scripts/common/show_one_msg.js" type="text/javascript"></script>
    <!--web im sdk 资料管理 api 示例代码-->
    <script src="../Scripts/profile/profile_manager.js" type="text/javascript"></script>
    <!--web im sdk 好友管理 api 示例代码-->
    <script src="../Scripts/friend/friend_manager.js" type="text/javascript"></script>
    <!--web im sdk 好友申请管理 api 示例代码-->
    <script src="../Scripts/friend/friend_pendency_manager.js" type="text/javascript"></script>
    <!--web im sdk 好友黑名单管理 api 示例代码-->
    <script src="../Scripts/friend/friend_black_list_manager.js" type="text/javascript"></script>
    <!--web im sdk 最近联系人 api 示例代码-->
    <script src="../Scripts/recentcontact/recent_contact_list_manager.js" type="text/javascript"></script>
    <!--web im sdk 群组管理 api 示例代码-->
    <script src="../Scripts/group/group_manager.js" type="text/javascript"></script>
    <!--web im sdk 群成员管理 api 示例代码-->
    <script src="../Scripts/group/group_member_manager.js" type="text/javascript"></script>
    <!--web im 切换聊天好友或群组 示例代码-->
    <script src="../Scripts/switch_chat_obj.js" type="text/javascript"></script>
    <!--web im sdk 获取c2c获取群组历史消息 示例代码-->
    <script src="../Scripts/msg/get_history_msg.js" type="text/javascript"></script>
    <!--web im sdk 发送普通消息(文本和表情) api 示例代码-->
    <script src="../Scripts/msg/send_common_msg.js" type="text/javascript"></script>
    <!--web im sdk 上传和发送图片消息 api 示例代码-->
    <script src="../Scripts/msg/upload_and_send_pic_msg.js" type="text/javascript"></script>
    <!--web im sdk 上传和发送文件消息 api 示例代码-->
    <script src="../Scripts/msg/upload_and_send_file_msg.js" type="text/javascript"></script>
    <!--web im sdk 切换播放语音消息 示例代码-->
    <script src="../Scripts/msg/switch_play_sound_msg.js" type="text/javascript"></script>
    <!--web im sdk 发送自定义消息 api 示例代码-->
    <script src="../Scripts/msg/send_custom_msg.js" type="text/javascript"></script>
    <!--web im sdk 发送群自定义通知 api 示例代码-->
    <script src="../Scripts/msg/send_custom_group_notify_msg.js" type="text/javascript"></script>
    <!--web im 监听群系统通知消息 示例代码-->
    <script src="../Scripts/msg/receive_group_system_msg.js" type="text/javascript"></script>
    <!--web im 监听好友系统通知消息 示例代码-->
    <script src="../Scripts/msg/receive_friend_system_msg.js" type="text/javascript"></script>
    <!--web im 监听资料系统通知消息 示例代码-->

    <script src="../Scripts/msg/receive_profile_system_msg.js" type="text/javascript"></script>
    <script src="../Scripts/mui.min.js" type="text/javascript"></script>
    <script src="../Scripts/mui.picker.min.js" type="text/javascript"></script>
    <script src="../Scripts/cropper.js" type="text/javascript"></script>
    <script src="../Scripts/listeners.js" type="text/javascript"></script>
    <script src="../Scripts/tech.js" type="text/javascript"></script>
    <script src="../Scripts/share.js" type="text/javascript"></script>
    <script src="../Scripts/mui.zoom.js" type="text/javascript"></script>
    <script src="../Scripts/mui.previewimage.js" type="text/javascript"></script>

    <!--主模块隐藏显示-->
    <script src="~/Scripts/defined/PanelShowManager.js"></script>
    <!--自定义监听-->
    <script src="~/Scripts/defined/DefinedListentersEvent.js"></script>
    <!--好友聊天-->
    <script src="~/Scripts/defined/C2C.js"></script>
    <!--群聊天-->
    <script src="~/Scripts/defined/Group.js"></script>
</head>
<body>
    <!-- 启动加载页面 -->
    <section class="welcome welcome-transition panel" style="display: none;"></section>

    <!-- 聊天列表界面 -->
    <section class="container index-container panel" id="MainPanel" style="display: block;">
        <header class="header index-header">
            <div class="header-setting">
                <a href="../Setting/Setting.html"></a>
            </div>
            <div class="logo">聊天</div>
            <div class="header-contact">
                <a href="###" onclick="ShowMainPanel('ContactPanel')">
                    <em></em>
                </a>
            </div>
            <div class="search">
                <span class="search-btn">
                    <i>搜索聊天</i>
                </span>
                <div class="search-input">
                    <div class="search-input-box">
                        <form>
                            <input id="search" placeholder="请输入关键字">
                            <i class="input-clear"></i>
                        </form>
                    </div>
                    <span class="search-close">Cancle</span>
                </div>
            </div>
        </header>

        <div class="sort">
            <span>Sorting By Name</span>
        </div>

        <div class="sort-panel">
            <div class="sort-option">
                <ul>
                    <li class="sort-activity">
                        <label>Activity</label>
                    </li>

                    <li class="sort-alpha">
                        <label>Alphabetical</label>
                    </li>

                    <li class="sort-type">
                        <label>Group By Type</label>
                    </li>

                    <li class="sort-favorite">
                        <label>Group By Favorite</label>
                    </li>

                    <li class="sort-unread">
                        <label>Unread on Top</label>
                    </li>
                </ul>
            </div>

            <div class="sort-panel-bg"></div>
        </div>

        <div class="chat-list">
            <h1 class="chat-list-type">Channels</h1>
            <!-- 群聊天列表 -->
            <ul id="chatMainGroupList" class="group-list"></ul>
            <h1 class="chat-list-type">Direct Messages</h1>
            <ul id="chatMainFriendList" class="wechat-list"></ul>

        </div>
    </section>

    <!-- C2C聊天界面 -->
    <div id="ChatPanel" class="panel">
        <header class="header">
            <div class="header-return">
                <a href="###" onclick="ShowMainPanel('MainPanel')"> </a>
            </div>

            <div class="logo" id="C2CAccountName"></div>

            <div class="header-profile">
                <a href="###"></a>
            </div>
        </header>
        <section class="container">
            <div class="chat" id="ChatPanel_listdiv">
                <div class="chat-container">
                    <ul id="chat-list"></ul>
                </div>
            </div>
        </section>

        <footer class="chat-footer" id="footer">
            <div class="chat-bar">
                <div class="chat-input">
                    <input placeholder="说点什么吧..." id="send_msg_text">
                </div>

                <div class="chat-btn" onclick="showEmotionDialog()">
                    <div class="chat-emoji">
                        <i></i>
                    </div>

                    <div class="chat-add">
                        <i></i>
                    </div>
                </div>

                <div class="chat-send">
                    <button onclick="onSendMsg()">发送</button>
                </div>
            </div>

            <div class="chat-panel">
                <div class="chat-operate">
                    <ul>
                        <li>
                            <div class="operate-btn">
                                <span class="icon-album">
                                    <input type="file">
                                </span>
                                <p>相册</p>
                            </div>
                        </li>

                        <li>
                            <div class="operate-btn">
                                <span class="icon-shot"></span>
                                <p>拍摄</p>
                            </div>
                        </li>

                        <li>
                            <a href="AddRedPaper.html" class="operate-btn">
                                <span class="icon-redpaper"></span>
                                <p>红包</p>
                            </a>
                        </li>

                        <li>
                            <a href="Transfer.html" class="operate-btn">
                                <span class="icon-transfer"></span>
                                <p>转账</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="emoji-operate">
                    <div class="emoji">
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 群聊天界面 -->
    <div id="GroupChatPanel" class="panel">
        <header class="header">
            <div class="header-return">
                <a href="javascript:history.go(-1);"></a>
            </div>

            <div class="logo" id="GroupChatName">群名字</div>

            <div class="header-group-profile">
                <a href="../Contact/GroupProfile.html"></a>
            </div>
        </header>

        <section class="container">
            <div class="chat">
                <div class="chat-container">
                    <ul>
                        <li class="chat-tips"> ---- 已无更多记录 ---- </li>

                        <li class="chat-time">
                            <span>昨天 12:34</span>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p1.jpg">
                            </a>

                            <div class="dialogue-content">
                                <h3>会员名字</h3>
                                <div class="dialogue-box">
                                    <p>老板准备发红包了！！</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p1.jpg">
                            </a>

                            <div class="dialogue-content">
                                <h3>会员名字</h3>
                                <div class="dialogue-box">
                                    <p>倒数10秒开始</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-time">
                            <span>昨天 12:36</span>
                        </li>

                        <li class="chat-dialogue chat-me">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p2.jpg">
                            </a>

                            <div class="dialogue-content">
                                <div class="dialogue-box">
                                    <p>等等我</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/images/member.png">
                            </a>

                            <div class="dialogue-content">
                                <h3>42424</h3>
                                <div class="dialogue-box">
                                    <p>就开始了？</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/images/member.png">
                            </a>

                            <div class="dialogue-content">
                                <h3>444</h3>
                                <div class="dialogue-box">
                                    <p>赶紧拜一下神，手气好一点</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-me">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p3.jpg">
                            </a>

                            <div class="dialogue-content">
                                <div class="dialogue-box">
                                    <p>看看手气如何</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-me">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p3.jpg">
                            </a>

                            <div class="dialogue-content">
                                <div class="redpaper-box redpaper-fail">
                                    <i class="icon-redpaper-1"></i>

                                    <div class="redpaper-name">
                                        <h3>大吉大利，今晚吃鸡</h3>
                                        <span>领取红包</span>
                                    </div>

                                    <p class="redpaper-info">BTC钱包</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-tips"> ---- XXX加入了群聊 ---- </li>

                        <li class="chat-time">
                            <span>昨天 12:41</span>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p5.jpg">
                            </a>

                            <div class="dialogue-content">
                                <div class="dialogue-box">
                                    <p><img src="../../Theme/images/emoji/emoji_08.png"></p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p5.jpg">
                            </a>

                            <div class="dialogue-content">
                                <a href="RedPaper.html" class="redpaper-box redpaper-open">
                                    <i class="icon-redpaper-1"></i>

                                    <div class="redpaper-name">
                                        <h3>大吉大利，今晚吃鸡</h3>
                                        <span>已领取</span>
                                    </div>

                                    <p class="redpaper-info">ETH钱包</p>
                                </a>
                            </div>
                        </li>

                        <li class="chat-dialogue chat-other">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p5.jpg">
                            </a>

                            <div class="dialogue-content">
                                <div class="redpaper-box redpaper-no-open">
                                    <i class="icon-redpaper-1"></i>

                                    <div class="redpaper-name">
                                        <h3>大吉大利，今晚吃鸡</h3>
                                        <span>领取红包</span>
                                    </div>

                                    <p class="redpaper-info">ETH钱包</p>
                                </div>
                            </div>
                        </li>

                        <li class="chat-time">
                            <span>昨天 12:42</span>
                        </li>

                        <li class="chat-dialogue chat-me">
                            <a href="" class="chat-people">
                                <img src="../../Theme/img/p3.jpg">
                            </a>

                            <div class="dialogue-content">
                                <div class="dialogue-box">
                                    <p>最新一条消息</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <footer class="chat-footer">
            <div class="chat-bar">
                <div class="chat-input">
                    <input placeholder="说点什么吧...">
                </div>

                <div class="chat-btn">
                    <div class="chat-emoji">
                        <i></i>
                    </div>

                    <div class="chat-add">
                        <i></i>
                    </div>
                </div>

                <div class="chat-send">
                    <button>发送</button>
                </div>
            </div>
            <div class="chat-panel">
                <div class="chat-operate">
                    <ul>
                        <li>
                            <div class="operate-btn">
                                <span class="icon-album">
                                    <input type="file">
                                </span>
                                <p>相册</p>
                            </div>
                        </li>

                        <li>
                            <div class="operate-btn">
                                <span class="icon-shot"></span>
                                <p>拍摄</p>
                            </div>
                        </li>

                        <li>
                            <a href="AddRedPaper.html" class="operate-btn">
                                <span class="icon-redpaper"></span>
                                <p>红包</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="emoji-operate">
                    <div class="emoji">

                    </div>
                </div>
            </div>
        </footer>

        <!--开红包-->
        <div class="open-redpaper open-success">
            <div class="redpaper">
                <div class="redpaper-close"></div>

                <div class="redpaper-content">
                    <img src="../../Theme/img/p5.jpg">
                    <h3>会员的名字</h3>
                    <p>发了一个群红包</p>

                    <h1>大吉大利，今晚吃鸡</h1>
                </div>

                <div class="redpaper-open-btn">
                    <span id="openRed">開</span>
                </div>

                <div class="redpaper-tag">
                    <i class="wallet-eos"></i>
                </div>
            </div>

            <div class="open-redpaper-bg"></div>
        </div>

        <!--开红包：抢光的红包-->
        <div class="open-redpaper open-fail">
            <div class="redpaper">
                <div class="redpaper-close"></div>

                <div class="redpaper-content">
                    <img src="../../Theme/img/p3.jpg">
                    <h3>会员的名字</h3>

                    <h1>手慢了，红包抢光了</h1>
                </div>

                <div class="redpaper-open-btn open-fail">
                    <span></span>
                </div>

                <div class="redpaper-tag">
                    <a href="RedPaper_Fail.html">去看看大家的手气</a>
                </div>
            </div>

            <div class="open-redpaper-bg"></div>
        </div>
    </div>

    <!-- 联系人界面 -->
    <div id="ContactPanel" class="panel">
        <header class="header">
            <div class="header-return">
                <a href="###" onclick="ShowMainPanel('MainPanel')"></a>
            </div>

            <div class="logo">联系人</div>

            <div class="header-add">
                <a href="###" onclick="ShowMainPanel('AddFriendPanel')"></a>
            </div>
        </header>

        <section class="container">
            <div class="search-contact">
                <span class="search-btn">
                    <i>搜索联系人</i>
                </span>

                <div class="search-input">
                    <div class="search-input-box">
                        <form>
                            <input id="search" placeholder="请输入群组/会员名字">
                            <i class="input-clear"></i>
                        </form>
                    </div>

                    <span class="search-close">取消</span>
                </div>
            </div>

            <div class="new-friend">
                <a href="###" onclick="showApplyFriendPanel()">
                    <span>新朋友</span>
                    <em></em>
                </a>
            </div>

            <div class="clr"></div>

            <div id="fixedBg" class="tab-title">
                <ul>
                    <li class="active">
                        <span>好友</span>
                    </li>
                    <li>
                        <span>群</span>
                    </li>
                </ul>
            </div>

            <div class="tab">
                <div class="tab-container" style="display: block;">
                    <div class="contact-people" id="Contact_friends_list">

                    </div>
                </div>

                <div class="tab-container">
                    <div class="contact-people contact-group">
                        <div class="contact-list group-list">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script>
            //选项卡
            $(".tab-title li").click(function () {
                var _index = $(this).index();
                $(".tab-container").eq(_index).fadeIn().siblings().hide();
                $(this).addClass("active").siblings().removeClass("active");
            });
        </script>
    </div>

    <!-- 申请成为好友和加入群列表 -->
    <div id="ApplyFriendListPanel" class="panel">
        <header class="header">
            <div class="header-return">
                <a href="javascript:void(0)" onclick="ShowMainPanel('ContactPanel')"></a>
            </div>
            <div class="logo">好友信息</div>
        </header>
        <section class="container">
            <div class="message-list">
                <h1>群通知</h1>
                <ul id="ApplyToGroupList">
                    <li>
                        <a href="NewGroupProfile.html">
                            <img src="../../Theme/img/p3.jpg">


                            <div class="message-list-content">
                                <h3>我爱运动群<i>群</i></h3>
                                <p>邀请您加入</p>
                            </div>
                        </a>

                        <button>同意</button>
                    </li>
                </ul>
                <a href="NewMessageMore.html" class="more-message">
                    <span>查看更多</span>
                </a>

                <h1>好友通知</h1>
                <ul id="ApplyToFriendList"></ul>

                <a href="NewMessageMore.html" class="more-message">
                    <span>查看更多</span>
                </a>

            </div>
        </section>
    </div>

    <!-- 添加好友界面 -->
    <div id="AddFriendPanel" class="panel">
        <header class="header index-header">
            <div class="header-return">
                <a href="###" onclick="ShowMainPanel('ContactPanel')"></a>
            </div>

            <div class="logo">添加好友</div>

            <div class="search">
                <div class="search-input search-all">
                    <div class="search-input-box">
                        <input id="AddFriendPanel_search" placeholder="输入要搜索的群/会员名字" value="" autofocus>
                        <i class="input-clear"></i>
                    </div>
                </div>
            </div>
        </header>

        <section class="container index-container">
            <div class="new-group">
                <a href="###" onclick="ShowMainPanel('AddGroupPanel')">
                    <span>新建群聊</span>
                </a>
            </div>

            <div class="chat-list chat-search-list">
                <h1 class="chat-list-type">群组</h1>

                <ul id="searchGroup"></ul>
            </div>

            <div class="chat-list chat-search-list">
                <h1 class="chat-list-type">用户</h1>

                <ul id="searchUser"></ul>
            </div>
        </section>
    </div>

    <!--好友详情界面 -->
    <div id="AddFriendInfoPanel" class="panel">
        <header class="header">
            <div class="header-return">
                <a href="javascript:void(0);" onclick="ShowMainPanel('ContactPanel')"></a>
            </div>

            <div class="logo">个人资料</div>
        </header>

        <section class="container profile-container">
            <div class="profile">
                <div class="profile-photo">
                    <img src="/Theme/img/p4.jpg" id="AddFirendImg">
                </div>
                <h1 id="AddFirendNick">会员名字</h1>
            </div>

            <h1 class="setting-title">个人信息</h1>
            <div class="setting setting-with-input">
                <div class="setting-list">
                    <p>昵称</p>
                    <i>XXXX</i>
                </div>

                <div class="setting-list">
                    <p>个性签名</p>
                    <i>真的猛士，敢于直面惨淡的人生，敢于正视淋漓的鲜血。</i>
                </div>

                <div class="setting-list">
                    <p>邮箱</p>
                    <i>23321313@qq.com</i>
                </div>
            </div>

            <div class="profile-bar" id="AddFriendDiv">
                <span class="add-contact-btn" onClick="showpop('#send');">添加好友</span>
            </div>

            <div class="profile-bar" id="ShowFriendDiv">
                <span class="add-contact-btn" onClick="showC2CContract()">发送消息</span>
            </div>

        </section>

        <!--发送验证消息弹窗-->
        <div id="send" class="popup">
            <div class="popup-box">
                <div class="popup-box-title">申请好友</div>
                <div class="popup-box-content">
                    <div class="form-widget">
                        <div class="form-box">
                            <div class="form-group">
                                <label class="form-label">验证消息</label>

                                <div class="form-control">
                                    <input placeholder="请输入验证消息" id="AddFirendWithWord">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="popup-submit">
                    <button class="cancle-btn" id="AddFirendCancelBtn">取消</button>
                    <button type="button" class="confirm-btn" id="AddFirendSubBtn">确认</button>
                </div>
            </div>
            <div class="popup-bg"></div>
        </div>
        <script>
            $(function () {
                //内容高度控制
                var boxHeight = $('.profile-bar').innerHeight() + 30;
                $('.profile-container').css('padding-bottom', boxHeight);
            });
            //弹框
            function showpop(id) {
                $(id).fadeIn();
                $('body').addClass('open-layer');
                var h = ($(window).height() - $(id).children('.popup-box').height()) / 2;
                $(id).children('.popup-box').css('top', h);
            }

            function showC2CContract() {
                OpenC2C($('#AddFirendNick').html());
            }

            $('#AddFirendCancelBtn').click(function () {
                $('.popup').fadeOut();
                $('body').removeClass('open-layer');
            });

            $('#AddFirendSubBtn').click(function () {
                applyAddFriend($('#AddFirendNick').html(), $('#AddFirendWithWord').val(), '');
                $('.popup').fadeOut();
                $('body').removeClass('open-layer');
            });
        </script>
    </div>

    <!--新建群组-->
    <div id="AddGroupPanel" class="panel">
        <header class="header">
            <div class="header-return">
                <a href="###" onclick="ShowMainPanel('AddFriendPanel')"></a>
            </div>

            <div class="logo">新建群组</div>

            <div class="header-btn">
                <a href="###" onclick="createGroup()">保存</a>
            </div>
        </header>

        <section class="container">
            <form>
                <div class="setting-photo">
                    <div class="setting-photo-icon" onclick="showtab('#photo');">
                        <img src="../../Theme/img/p1.jpg">
                    </div>
                </div>

                <h1 class="setting-title">群信息设置</h1>
                <div class="setting setting-with-input">
                    <div class="setting-list">
                        <input placeholder="群名称" id="AddGroupName">
                    </div>

                    <div class="setting-list">
                        <input placeholder="群简介">
                    </div>
                </div>

                <div class="setting">
                    <div class="setting-list">
                        <a href="javascript:;" onclick="showSelecteFirendPanel('AddGroupPanel','AddGroupPanel');">
                            <p>选择成员</p>
                            <span class="setting-option" id="HadSelecteFriend">已选5人</span>
                        </a>
                    </div>
                </div>
            </form>
        </section>
    </div>

    <!--选择好友-->
    <div id="SelectFriendPanel" class="panel">
        <div id="setMember" class="slide-warp" style="bottom: 0px;">
            <div class="choose-member">
                <div class="choose-member-header">
                    <span id="Btn_BackToPanel">取消</span>

                    <h1>选择好友</h1>

                    <button type="button" id="Btn_FinishGoToPanel">完成</button>
                </div>

                <div class="choose-member-container" id="Selecte_friends_list">

                </div>
            </div>
        </div>
    </div>

    <!--修改图片-->
    <div id="ChangePicPanel" class="panel">
        <div id="photo" class="slide-warp">
            <div class="slide-box">
                <ul>
                    <li>
                        <a href="javascript:;">手机拍照</a>
                    </li>

                    <li>
                        <a href="javascript:;">相册选择图片</a>
                    </li>
                </ul>
                <ul>
                    <li class="cancle">
                        <a href="javascript:;" onclick="hidetab('#photo');">取消</a>
                    </li>
                </ul>
            </div>
            <div class="slide-warp-bg" onclick="hidetab('#photo');"></div>
        </div>
    </div>

    <div id="Content"></div>
    <div id="AddFriendPanel_account"></div>
    <div id="showGenderPicker"></div>
    <div id="showBirthDayPicker"></div>
    <div id="CropperPicPanel_save"></div>
    <div id="CropperPicPanel_canel"></div>
    <div id="CropperPicPanel_redo"></div>
    <div id="CropperPicPanel_undo"></div>
    <div id=""></div>

    <script type="text/javascript">
        //var LOCALHOST = "http://119.63.35.222:12901";
        var LOCALHOST = "";
        var SHARE_LAST_REFRESH_TIME = 'SHARE_LAST_REFRESH_TIME'; // 记录朋友圈最后更新一次时间Key
        var succeed = 200; // Ajax请求成功
        var accountMode = 0; // 帐号模式，0-表示独立模式，1-表示托管模式
        var sdkAppID = 1400141902; // 自建应用appid
        var accountType = 36862; // 帐号体系集成
        var AdminAcount = 'xman'; // 自建应用的管理员账号
        var selType = webim.SESSION_TYPE.C2C; // 当前聊天类型
        var selToID = null; // 当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
        var selSess = null; // 当前聊天会话对象
        var recentSessMap = {}; // 保存最近会话列表
        var infoMap = {}; // 初始化时，可以先拉取我的好友和我的群组信息
        var memberMap = {}; // 群成员Map
        var reqRecentSessCount = 100; // 每次请求的最近会话条数，业务可以自定义
        var isPeerRead = 1; // 是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。
        var friendHeadUrl = '../Content/img/friend.jpg'; // 默认好友头像，用于没有设置过头像的好友
        var groupHeadUrl = '../Content/img/group.jpg'; // 默认群头像，用于没有设置过群头像的情况
        var maxNameLen = 12; // 我的好友或群组列表中名称显示最大长度
        var reqMsgCount = 15; // 每次请求的历史消息(c2c获取群)条数
        var totalCount = 500; // 每次接口请求的条数
        var emotionFlag = false; // 是否打开过表情选择框
        var curPlayAudio = null; // 当前正在播放的audio对象
        var getPrePageC2CHistroyMsgInfoMap = {}; // 保留下一次拉取好友历史消息的信息
        var getPrePageGroupHistroyMsgInfoMap = {}; // 保留下一次拉取群历史消息的信息

        var genderPicker; // 性别Picker
        var dtPicker; // 生日Picker
        var cropper; // 截图对象

        var userHeadImageMap = []; // 用户头像Map

        var headPicturePanelFLag = 0; // 调用摄像头flag
        var shareTimerObj; // 监听朋友圈更新Timer
        var shareRequestStatus = 0; // 朋友圈当前请求状态 0：请求完了 1：请求中
        var pageSize = 10;
        var pageIndex = 0;
        var loading = false; // 滚动加载事件
        var initShare = true;
        var shareLastRefreshTime = '';
        // 当前用户身份
        var loginInfo = {
            'sdkAppID': sdkAppID, // 用户所属应用id,必填
            'identifier': '@ViewBag.LoginName', // 当前用户ID,必须是否字符串类型，必填
            'accountType': accountType, // 用户所属应用帐号类型，必填
            'userSig': null, // 当前用户身份凭证，必须是字符串类型，必填
            'identifierNick': null, // 当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
            'headurl': '../Content/img/member.png' // 当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
        };

        //添加好友信息Model
        var addFriendModel = {
            nick:'',
            headimg:'',
            gender:'',
            allowType:'',
            brithday:0
        };

        // 监听事件
        var listeners = {
            "onConnNotify": onConnNotify, // 监听连接状态回调变化事件,必填
            "jsonpCallback": jsonpCallback, // IE9(含)以下浏览器用到的jsonp回调函数
            "onMsgNotify": onMsgNotify, // 监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
            "onBigGroupMsgNotify": onBigGroupMsgNotify, // 监听新消息(直播聊天室)事件，直播场景下必填
            "onGroupSystemNotifys": onGroupSystemNotifys, // 监听（多终端同步）群系统消息事件，如果不需要监听，可不填
            "onGroupInfoChangeNotify": onGroupInfoChangeNotify, // 监听群资料变化事件，选填
            "onFriendSystemNotifys": onFriendSystemNotifys, // 监听好友系统通知事件，选填
            "onProfileSystemNotifys": onProfileSystemNotifys, // 监听资料系统（自己或好友）通知事件，选填
            "onKickedEventCall": onKickedEventCall, // 被其他登录实例踢下线
            "onC2cEventNotifys": onC2cEventNotifys, // 监听C2C系统消息通道
            "onAppliedDownloadUrl": onAppliedDownloadUrl, // 申请文件/音频下载地址的回调
            "onLongPullingNotify": function (data) {
                console.debug('onLongPullingNotify', data)
            }
        };

        // 初始化时，其他对象，选填
        var options = {
            'isAccessFormalEnv': true, // 是否访问正式环境，默认访问正式，选填
            'isLogOn': false // 是否开启控制台打印日志,默认开启，选填
        }

         // MUI架构
        ;(function ($) {
            mui.init();
            var json = @Html.Raw(ViewBag.PageInfo);
            // 好友头像
            userHeadImageMap = json.UserImageList;
            // 腾讯云通信登录
            tencentLogin(json);
            //自定义监听事件
            ListEvent_SearchFriend('AddFriendPanel_search');
            initRecentContactList();
        })(mui);

        // 退出
        function quitClick() {
            // 朋友圈数据监听停止
            //clearTimeout(shareTimerObj);
            if (loginInfo.identifier)
            {
                // sdk登出
                webim.logout(
                    function (resp) {
                        loginInfo.identifier = null;
                        loginInfo.userSig = null;
                        window.location.href = '@ViewBag.ReturnUrl';
                    }
                );
            }
            else
            {
                mui.toast('未登录');
            }
        }
    </script>

    <!--底部输入框操作-->
    <script>
        $(function () {

            //打开操作面板
            $('.chat-add').click(function () {
                $(this).addClass('active').siblings().removeClass('active');

                $('body').addClass('open');
                $('.chat-operate').show().siblings().hide();
            });

            $('.chat-emoji').click(function () {
                $(this).addClass('active').siblings().removeClass('active');

                $('body').addClass('open');
                $('.emoji-operate').show().siblings().hide();
            });

            //聊天输入文字时出现发送按钮
            $('.chat-input input').on('input', function () {

                if (!($('.chat-input input').val() == '')) {
                    $('.chat-send').fadeIn();
                } else {
                    $('.chat-send').fadeOut();
                }
            });

            //输入文字时收起操作面板
            $('.chat-input input').on('focus', function () {
                $('body').removeClass('open');

                $('.chat-add').removeClass('active');
                $('.chat-emoji').removeClass('active');
            });

            //触碰聊天界面收起操作面板
            $(".chat-container").on("touchstart", function () {
                $('body').removeClass('open');

                $('.chat-add').removeClass('active');
                $('.chat-emoji').removeClass('active');
            });

            //窗口位置保持在最后一条聊天记录
            $('.chat-container').scrollTop($('.chat-container ul').innerHeight());

            //操作面板弹出保持在最后一条聊天记录
            $('.chat-footer').click(function () {
                $('.chat-container').scrollTop($('.chat-container ul').innerHeight());
            });

            //键盘弹出保持在最后一条聊天记录
            $(window).resize(function () {
                $('.chat-container').scrollTop($('.chat-container ul').innerHeight());
            });
        });
    </script>

</body>

</html>
